<template>
  <el-dialog v-model="dialogVisible" :title="title" :width="width" :destroy-on-close="destroyOnClose" 
      :draggable="true" :close-on-click-modal="false" :close-on-press-escape="false">
      <!-- 插槽 -->
      <slot></slot>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="submit" :loading="btnLoading">{{ confirmText }}</el-button>
        </span>
      </template>
  </el-dialog>
</template>

<script setup>
import { ref } from 'vue'

const dialogVisible = ref(false)

// 打开
const open = () => dialogVisible.value = true
// 关闭
const close = () => dialogVisible.value = false

// 确认按钮加载 loading
const btnLoading = ref(false)
// 显示 loading
const showBtnLoading = () => btnLoading.value = true
// 隐藏 loading
const closeBtnLoading = () => btnLoading.value = false

// 暴露给父组件
defineExpose({
  open,
  close,
  showBtnLoading,
  closeBtnLoading
})

// 对外暴露属性 标题 宽度 组件 关闭销毁元素 提交
const props = defineProps({
  title: String,
  width: {
    type: String,
    default: window.screen.width > 768 ? '40%' : '80%'
  },
  destroyOnClose: {
    type: Boolean,
    default: false
  },
  confirmText: {
    type: String,
    default: '提交'
  }
})

// 对外暴露一个submit方法
const emit = defineEmits(['submit'])
const submit = () => emit('submit')
</script>